<template>
    <div class="message">
        <input type="text" placeholder="请输入图片验证码" :value="value" @change="bindValue" @input="bindValue" v-betterInput="betterInput">
        <img :src="authImg" alt="点击重新获取" class="getImg" @error="failLoad" @click="getAuthImg()">
    </div>
</template>
<script>
/*
    获取图像验证码需要手机号，方可
*/
//图形验证码组件
// import authImgDefault from 'asset/img/dev/captcha.png'
import config from 'service/config'
export default {
    data() {
        return {
            authImg: null,
            waiting: false
        }
    },
    props: {
        value: null,
        mobile: null,
        reauth: null,
        betterInput: {
            default: 0
        }
    },
    mounted() {
        this.getAuthImg();
    },
    methods: {
        bindValue(e) {
            this.$emit('input', e.target.value);
        },
        getAuthImg() {
            var vm = this;
            if (this.waiting) return;
            this.waiting = true;
            $ajax.captcha.getAuthImg({ mobile: this.mobile }).then(res => {
                var { code } = res.data;
                var { base64 } = res.data.data;
                vm.authImg = base64;
                this.waiting = false;
            }).catch(err => {
                this.authImg = null;
                this.waiting = false;
            })
        },
        failLoad() {
            //获取图片验证码失败后，显示提示图片
            this.authImg = null;
        }
    },
    watch: {
        reauth() {
            this.getAuthImg();
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../asset/scss/mixin/export.scss';
.inputLine {
    @include inputLine;
}

.inputCenter {
    @include inputCenter;
}

.inputLeft {
    @include inputLeft;
}

.getImg {
    position: absolute;
    top: 50%;
    right: $pt15;
    height: $pt30;
    margin-top: -$pt15;
}
</style>